Repository navigation
Search page styling and admin form spacing - #38
Merged
Merged
Conversation
On current WordPress (7.x) the core form controls have no bottom margin. The search settings, the search page form and the first-run credentials form stacked their fields, checkboxes and toggles with no space between them, and the next label sat on the last row. A FormStack component (core Flex, column) now sets the block editor spacing: 16px between fields, 12px between the rows of a group and 24px around a group. Checkbox and toggle groups are fieldsets whose legend looks like a core control label. The Edit and Delete links in the search pages table get a gap. The Settings page already spaced its controls and the block sidebar is spaced by core, so both are unchanged.
The default stylesheet keeps the theme's fonts and text colour and adds: - one spacing scale; the checkbox and the count badge have a gap from the label, and counts are quiet right-aligned badges - facet headings as small capitals with a rule; empty facets are hidden - the result title larger than the summary; tags as quiet pills - "Clear refinements" as an outline button in the text colour (the InstantSearch theme drew white text on pale blue, below WCAG AA) - a visible focus outline on every link, button and field - facets above the results, side by side, in a container narrower than 37.5rem (phones, narrow columns) - the InstantSearch widgets no longer force navy text or icons - a styled no-JavaScript form; no empty facet column or single-page pagination Every value is a --quant-search-* custom property. The defaults sit in :where(.quant-search), so a theme rule on .quant-search always wins. Class names and markup are unchanged. Tests cover the defaults, the widget colour, the button, the focus outline and that the readme documents every property.
Lists every --quant-search-* custom property with its default, the narrow layout, and the stable class names themes can target.
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two polish fixes from the WordPress film review, plus the docs for theming the search page.
Admin: form spacing
On current WordPress (7.x) the core form controls have no bottom margin. The search settings, the search page form and the first-run credentials form stacked their fields, checkboxes and toggles with no space between them, and the next label ("Manual filters", "Results per page", "Summary source") sat directly on the last row.
FormStackcomponent (coreFlex, column) with the block editor spacing: 16px between fields, 12px between the rows of a group, 24px around a group.Search page: default styles
Keeps the theme's fonts and text colour, every class name and the markup.
--quant-search-*custom property. The defaults are in:where(.quant-search), so a theme rule on.quant-searchwins in any stylesheet order.Docs
New readme section "Styling the search page": what the page inherits, every custom property with its default, the narrow layout, and the stable class names. A test fails if a property is not documented. Changelog entries are under 2.0.5; no version bump.
Screenshots (described)
Taken on WordPress 7.1.4 with Twenty Twenty-Five, from the e2e environment with Algolia answered by a fixture (two facets, "Topic" and "Type", four results with tags and thumbnails), at 1400px and 390px wide.
Not changed
spacing--60margin and padding above the title). The stylesheet stays inside.quant-search, so it does not change that.Tests
SearchStylesTest), PHPStan no errors, PHPMD cleannpm run lint:js,npm run lint:css,npm run test:unit(17) pass;npm run buildcommitted